<template>
  <div class="app-container">
    <router-view />
  </div>
</template>

<script>
import { defineComponent, onMounted, onBeforeUnmount } from 'vue';
import { useUserStore } from './stores/user';
import { useChatStore } from './stores/chat';

export default defineComponent({
  name: 'App',
  setup() {
    const userStore = useUserStore();
    const chatStore = useChatStore();
    
    onMounted(() => {
      // 如果有token，获取用户信息
      if (userStore.isLoggedIn) {
        userStore.fetchUserProfile();
        
        // 初始化WebSocket连接
        const token = localStorage.getItem('token');
        if (token) {
          chatStore.connectWebSocket(token);
        }
      }

      // 兜底：监听登出事件，断开连接并清理
      const onUserLogout = () => {
        try {
          chatStore.disconnect();
        } catch (e) {}
      };
      window.addEventListener('user-logout', onUserLogout);

      onBeforeUnmount(() => {
        window.removeEventListener('user-logout', onUserLogout);
      });
    });
  }
});
</script>

<style>
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

.app-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .desktop-only {
    display: none !important;
  }
}

@media (min-width: 769px) {
  .mobile-only {
    display: none !important;
  }
}
</style>